React中自行定義新的Component組件：

一個React Component除了有重要的替換render（）外，將會有屬性（props）跟狀態（state），生命週期（lifecycle）。

一.下面的程式就是組件，它一定要繼承React.Component並實作render且有return。

test.js

import React from "react";

class Test extends React.Component {
    render() {
      return <h1>Hello , {this.props.name}</h1>;
    }
  }
}
  export default Test;

二.使用組件的方法:
1.先import組件進來，並給它一個變數的名子Test。例:import Test from './Test.js';
2.在ReactDOM.render()裡加上就可以使用了。
3.若要加上參數的話就在 ;裡面加，name="Sara",要多筆就用逗號分開。

index.js

//import 組件進來
import Test from './Test.js';
ReactDOM.render(
  //這一段就是使用組件
  <Test name="Sara" />;
  
  document.getElementById('root')
);

三.在組件中可以使用組件
1.先import組件進來，並給它一個變數的名子Test。例:import Test from './Test.js';
2.在ReactDOM.render()裡加上就可以使用了。
3.若要加上參數的話就在 ;多筆就用空格分開。

Test.js

import React from "react";
import Welcome from './welcome.js';

class Test extends React.Component {
	
  render() {
    return (
      <div>
		//有傳參數prop，那子元件那邊的類別中的建構子就會接收到this.props.name。
		<Welcome name="Sara" />; 
		<Welcome/>;
      </div>
    );
  }
}